XAML control and app styling sample


XAML, Windows Runtime
Controls
Windows RT
en-US
11/25/2013

This sample demonstrates how to use styles and templates to customize the look of controls and apps.

Specifically, this sample covers:

  • Setting the Style property to change the look of a control.

    You can apply styling to any element of type FrameworkElement, including subclasses of FrameworkElement. This means that almost all XAML elements support the Style property.

  • Using a template to change the look of a control.

    Elements that derive from the Control class also contain a control template which defines the visual look of the control. A control template can be specified using the Template property on the Control class. It can also be specified in a Style.

  • Using theme resources.

    The XAML runtime provides a list of resources called "theme resources" which can be used anywhere in your app. The look of theme resources changes when you use the Light or Dark app themes, or when the user turns on the High Contrast setting.

  • Creating theme resources for an app.

    You can override the default theme resources values in your app by creating ResourceDictionary entries using the same key names.

To obtain an evaluation copy of Windows 8.1, go to Windows 8.1.

To obtain an evaluation copy of Microsoft Visual Studio 2013, go to Visual Studio 2013.

Note  For Windows 8 app samples, download the Windows 8 app samples pack. The samples in the Windows 8 app samples pack will build and run only on Microsoft Visual Studio 2012.

Related topics

Quickstart: Styling controls
Quickstart: Control templates
Roadmap for C# and Visual Basic
Windows 8 app samples

Operating system requirements

Client
Windows 8.1
Server
Windows Server 2012 R2

Build the sample

  1. Start Visual Studio 2013 and select File > Open > Project/Solution.
  2. Go to the directory in which you unzipped the sample. Go to the directory named for the sample, and double-click the Visual Studio 2013 Solution (.sln) file.
  3. Press F7 or use Build > Build Solution to build the sample.

Run the sample

To run the app and then debug it, press F5 or use Debug > Start Debugging. To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.